import React, { memo, useRef, useState } from "react";
import { openNotification_util } from "./shipSRM/util/util";
import { Modal, Button,Input } from "antd";


Storage = window.localStorage

const registaccount = (({username}) => {

  const [visible, setVisible] = useState(false);

  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [gysmc, setGysmc] = useState('');
  const [shxydm, setShxydm] = useState('');
  const [lxr, setLxr] = useState('');




  const cancelHandle = () => {
    
    setVisible(false);
  };

  

  const handleOk = async () => {
    // 验证手机号格式
    if(!/^1[3-9]\d{9}$/.test(phone)) {
      openNotification_util( "请输入正确的手机号格式");
      return;
    }
    // 校验所有字段是否填写
    if(!phone || !gysmc || !shxydm || !lxr) {
      openNotification_util("请检查表单，确保所有字段都已填写");
      return;
    }

    try {
      // 验证手机号是否与系统中的一致
      const checkPhoneRes = await fetch('/admin/sys/ifexist_shxydm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          shxydm: shxydm,
          gysmc: gysmc,
          phone: phone
        })
      });
      
      const checkData = await checkPhoneRes.json();
      console.log("校验是否存在社会信用代码",checkData)
      
      if(checkData.rtstatus) {
        openNotification_util("当前供应商已注册，请校验您当前输入的社会信用代码");
        return;
      }

     

      // 提交更新密码
      const registRes = await fetch('/admin/sys/create_register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          phone: phone,
          password: password,
          gysmc: gysmc,
          shxydm: shxydm,
          lxr: lxr
        })
      });

      const updateData = await registRes.json();
      console.log("提交注册申请处理结果：",updateData)

      if(updateData.rtstatus) {
        openNotification_util("已成功提交注册申请，审批通过后，我们会通过短信通知您！");
        setVisible(false);
        // 清空输入
        setPhone('');
        setPassword('');
        setGysmc('');
        setShxydm('');
        setLxr('');
       
      } else {
        openNotification_util(updateData.rtmessage);
      }

    } catch(err) {
      openNotification_util("系统错误，请稍后重试");
      console.error(err);
    }

    setVisible(false);
  };

  //样式部分
  return (
    <div>
      
      <Button type="link" style={{width:"12vw",color:"#E62129",textIndent:"-3rem",fontSize:"1vw",fontWeight:"bold"}} onClick={() => setVisible(true)}>
        注册账号
      </Button>

      {visible && (
        //弹窗开始
        <Modal
          title="注册账号"
          open={visible}
          onOk={handleOk} 
          onCancel={() => cancelHandle()}
          width={"40vw"}
          height={"30vw"}
        >
         
               <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>供应商名称</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={gysmc}
                onChange={e => setGysmc(e.target.value)}
               placeholder="请输入供应商名称"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>
            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>社会信用代码</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={shxydm}
                onChange={e => setShxydm(e.target.value)}
               placeholder="请输入社会信用代码"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>
            
            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>联系人</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={lxr}
                onChange={e => setLxr(e.target.value)}
               placeholder="请输入联系人姓名"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>

            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>手机号</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={phone}
                onChange={e => setPhone(e.target.value)}
               placeholder="请输入手机号"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>

            {/* <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>密码</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="请输入密码"
                style={{width:"26vw"}}
              />
              </div>
            </div> */}

            

            {/* <Button type="primary" style={{width:"18vw",left:"2vw"}} onClick={handleOk}>
              提交
            </Button> */}
        
          
        </Modal>
      )}
    </div>
  );
});

export default registaccount;